<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"
    type="application/javascript"></script>
  <!-- <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.js"
        type="application/javascript"></script> -->
  <title>Document</title>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="(item,index) of person">
        --ID:{{item.id}}--名字 {{item.name}}--年龄：{{item.age}}
        <button>del</button>
      </li>

    </ul>
    <button v-on:click="add">add</button>
  </div>
  <script>
    let { ref } = Vue
    const app = Vue.createApp({
      setup() {
        let person = ref([
          { id: '011', name: '张三', age: 18 },
          { id: '012', name: '李四', age: 8 },
          { id: '013', name: '王五', age: 28 }
        ]);
        function add() {
          var one = { id: '014', name: '朱八', age: 36 };
          this.person.push(one)
        }
        return {
          person,
          add
        }
      }
      // data() {
      //   return {
      //     person: [
      //       { id: '011', name: '张三', age: 18 },
      //       { id: '012', name: '李四', age: 8 },
      //       { id: '013', name: '王五', age: 28 }
      //     ]
      //   }
      // },
      // methods: {
      //   add() {
      //     var one = { id: '014', name: '朱八', age: 36 };
      //     this.person.push(one)
      //   }
      // },
    }).mount('#app');

      // var vm = new Vue({
      //   el: "#app",
      //   data() {
      //     return {
      //       person: [
      //         { id: "011", name: "张三", age: 18 },
      //         { id: "012", name: "李四", age: 8 },
      //         { id: "013", name: "王五", age: 28 },
      //       ],
      //     };
      //   },
      //   methods: {
      //     add() {
      //       var one = { id: "014", name: "朱八", age: 36 };
      //       this.person.push(one);
      //     },
      //   },
      // });
  </script>
</body>

</html>